<template>
	<div>
		<el-row
			:gutter="0"  
			class="mx-0 px-0"
			v-loading="topdataLoading">
		  <el-col 
				:span="6" 
				class="px-0"
				v-for="(item,index) in CountsData" 
				:key="index">
		  	<el-card 
					class="box-card" 
					shadow="hover">
		  		<div class="d-flex align-items-center">
		  			<i 
							:class="[item.icon,item.color]"
							class="h4 mb-0 text-white text-center mr-3" 
							style="width: 40px;height: 40px;line-height: 40px;"></i>
		  			<div>
		  				<h4 class="mb-1">
									{{item.num}}
							</h4>
		  				<small class="text-muted">{{item.desc}}</small>
		  			</div>
		  		</div>
		  	</el-card>
		  </el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		props:{
			topdataLoading:{
				type:Boolean,
				default:()=>false
			},
			counts:{
				type:Object,
				default:()=>{}
			},
		},
		watch:{
			counts:{//深度监听，可监听到对象、数组的变化
				handler(val, oldVal){
					if(val){
						this.CountsData.map((item)=>{
							item.num = val[item.field]
						})
					}
				},
				deep:true //true 深度监听
			}
		},
		data(){
			return{
				CountsData :[
					{ icon:"el-icon-user-solid", 	field:'addnum',	desc:"本月新增客户",		num:0,	 color:"bg-primary"},
					{ icon:"el-icon-s-finance",  	field:'sharenum',desc:"本月收费金额",	num:0, 	 color:"bg-success"},
					{ icon:"el-icon-s-data",		 field:'casenum', desc:"本月新增案件",		num:0, 	 color:"bg-warning"},
					{ icon:"el-icon-s-order",		 field:'courtnum',desc:"本月新增顾问",		num:0,	 color:"bg-danger"}
				]
			}
		},
		mounted() {
			
		},
		methods:{
			
		}
	}
	
</script>

<style scoped>
	.align-items-center {
	    align-items: center!important;
	}
	.d-flex {
	    display: flex!important;
	}
	.text-white {
	    color: #fff!important;
	}
	
	.text-center {
	    text-align: center!important;
	}
	.bg-primary {
	    background-color: #007bff!important;
	}
	.mr-3, .mx-3 {
	    margin-right: 1rem!important;
	}
	.bg-success {
	    background-color: #28a745!important;
	}
	.mb-0, .my-0 {
	    margin-bottom: 0!important;
	}
	
	.bg-warning {
	    background-color: #ffc107!important;
	}
	.bg-danger {
	    background-color: #dc3545!important;
	}
	
	.h4, h4 {
	    font-size: 1.5rem;
	}
	.mb-1, .my-1 {
	    margin-bottom: .25rem!important;
	}
	.text-muted {
	    color: #6c757d!important;
	}
	
	.small, small {
	    font-size: .875em;
	    font-weight: 400;
	}
</style>
